<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DG8_07</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <!-- 自定义样式 -->
    <style>
        body {
            background-color: #b0b16f;
        }
        .signup-box {
            width: 50%;
            margin: 50px auto;
            background-color: white;
            border-radius: 10px;
            box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
            overflow: hidden;
            display: flex; /* 使用 flex 布局 */
        }
        .signup-img {
            width: 50%;
            
        }
        .signip-img img {
            width: 100%;
            height: 100%;
        }
        .signup-form {
            width: 50%;
            /* float: right; */
            padding: 40px;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">What's for today ?</a>
            <!-- 导航栏右侧内容 -->
            <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
                
                <li class="nav-item">
                    <a class="nav-link" href="index.html">Home</a>
                </li>
                <!-- <li class="nav-item">
                    <a class="nav-link" href="#" id="logoutBtn">Logout</a>
                </li> -->
                
            </ul>
        </div>
    </nav>

    <!-- 页面内容 -->
    <div class="signup-box">
        <!-- 图片 -->
        <div class="signup-img">
            <img src="img/signin.jpg" alt="Sign Up Image" class="img-fluid">
        </div>
        <!-- 注册表单 -->
        <div class="signup-form">
            <h1 class="mb-4">Sign Up</h1>
            <form id="signup-form">
                <div class="mb-3">
                    <label for="inputUsername" class="form-label">Username</label>
                    <input type="text" class="form-control" id="inputUsername" required>
                </div>
                <div class="mb-3">
                    <label for="inputEmail" class="form-label">Email address</label>
                    <input type="email" class="form-control" id="inputEmail" required>
                </div>
                <div class="mb-3">
                    <label for="inputPassword" class="form-label">Password</label>
                    <input type="password" class="form-control" id="inputPassword" required>
                </div>
                <div class="mb-3">
                    <label for="inputConfirmPassword" class="form-label">Confirm Password</label>
                    <input type="password" class="form-control" id="inputConfirmPassword" required>
                </div>
                <button type="submit" class="btn btn-primary">Sign Up</button>
            </form>
            <a href="login.html" class="btn btn-link">Log in</a>
        </div>
    </div>

    <!-- JavaScript代码 -->
    <script src="main.js"></script>
</body>
</html>
